<template>
	<el-main>
		<el-card header="基本信息">
			<el-form label-width="80">
				<el-row :gutter="12">

					<el-col :span="8">
						<el-form-item required label="学员姓名">
							<el-input placeholder=" 请输入学员姓名" v-model="customer.name"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item required label="联系电话">
							<el-input placeholder=" 请输入学员联系电话" v-model="customer.mobile"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item required label="学员微信">
							<el-input placeholder=" 请输入学员微信" v-model="customer.wechat"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item required label="学员性别">
							<el-radio-group v-model="customer.gender">
								<el-radio v-for="item in dicts.system_global_gender" :key="item.id" :value="item.v"
									:label="item.k"></el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="学员年龄">
							<el-input-number v-model="customer.age"></el-input-number>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item required label="渠道来源">
							<el-select v-model="customer.source" placeholder="请选择">
								<el-option v-for="item in channelPage" :key="item.id" :value="item.id"
									:label="item.channelName"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item required label="意向度">
							<el-rate v-model="customer.purpose"></el-rate>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="意向课程">
							<el-select v-model="customer.purposeCourseIds" placeholder="请选择">
								<el-option v-for="item in subjectPage" :key="item.id" :value="item.id"
									:label="item.subjectName"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="意向班级">
							<el-select v-model="customer.purposeClassIds" placeholder="请选择">
								<el-option v-for="item in classPage" :key="item.id" :value="item.id"
									:label="item.className"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item required label="客户级别">
							<el-select placeholder="请选择" v-model="customer.level">
								<el-option v-for="item in dicts.recruit_customer_level" :key="item.id" :value="item.v"
									:label="item.k"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="学校">
							<el-input v-model="customer.school"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="专业">
							<el-input v-model="customer.major"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item required label="学员学历">
							<el-select v-model="customer.education" placeholder="请选择学员学历">
								<el-option v-for="item in dicts.recruit_education_background" :key="item.id"
									:value="item.v" :label="item.k"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="所在城市">
							<XlxCitySelect @addSuccess="getCity"></XlxCitySelect>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="备注" style="width: 100%;">
							<el-input type="textarea" placeholder="请输入备注" v-model="customer.remark" maxlength="200"
								show-word-limit></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

		<el-card header="跟进信息" style="margin-top: 15px;">
			<el-alert style="margin-bottom: 15px;" title="回访日期为当次跟进时间，下次跟进时间会根据共有池设置的跟进天数自动计算，在规定天数内未跟进则自动掉入共有池。"
				type="info" show-icon></el-alert>
			<el-form label-width="100">
				<el-row :gutter="12">
					<el-col :span="8">
						<el-form-item required label="跟进方式">
							<el-select placeholder="请选择跟进方式" v-model="follow.followMethod">
								<el-option v-for="item in dicts.recruit_follow_method" :key="item.id" :value="item.v"
									:label="item.k"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item required label="回访日期">
							<el-date-picker placeholder="请选择回访日期" prefix-icon="Clock" v-model="follow.followTime"
								format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
								@change="onTimeChange"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="下次回访日期">
							<el-input placeholder="请选择回访日期" prefix-icon="Clock" v-model="follow.nextFollowTime"
								disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item required label="沟通内容">
							<el-input type="textarea" show-word-limit maxlength="200"
								v-model="follow.followContent"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="上传附件">
							<el-upload v-model:file-list="fileList" class="upload-demo" multiple :http-request="upload">
								<el-button type="primary">上传附件</el-button>
								<template #tip>
									<div class="el-upload__tip">
										可上传图片和音频，支持格式：jpg、jpeg、png、mp3、mp4
									</div>
								</template>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

		<el-card header="经办人" style="margin-top: 15px;">
			<el-form label-width="100" inline>
				<el-form-item label="录入时间">
					<el-input v-model="manager.inputTime" disabled></el-input>
				</el-form-item>
				<el-form-item label="顾问老师">
					<el-input v-model="manager.managerTeacher" disabled></el-input>
				</el-form-item>
			</el-form>
		</el-card>

		<div style="display: flex; justify-content: center;align-items: center;margin-top: 10px;">
			<el-button type="primary" @click="postConsultAddData()">保存</el-button>
		</div>
	</el-main>
</template>

<script setup lang="ts">
import { getClassPageApi } from '@renderer/api/class';
import { getChannelPageApi } from '@renderer/api/media';
import { postConsultAddApi } from '@renderer/api/recruit';
import { getSubjectPageApi } from '@renderer/api/subject';
import { useDicts } from '@renderer/composables/dicts';
import { ClassItem } from '@renderer/interface/class';
import { ChannelItem } from '@renderer/interface/media';
import { Customer, Follow, FollowFileItem } from '@renderer/interface/recruit';
import { SubjectItem } from '@renderer/interface/subject';
import { useTagStore } from '@renderer/stores/tag';
import { useUserStore } from '@renderer/stores/user';
import { tool } from '@renderer/utils/tool';
import { UploadRequestHandler, UploadUserFile } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 给需要缓存的组件命名
defineOptions({
	name: '新建咨询'
})

// 学员基本信息
const customer = ref<Customer>({
	name: '',
	mobile: '',
	wechat: '',
	source: '',
	purpose: 0,
	purposeCourseIds: '',
	purposeClassIds: '',
	level: '',
	dealStatus: '',
	dealTime: '',
	gender: '0',
	education: '',
	province: '',
	city: '',
	county: '',
	age: 18,
	school: '',
	major: '',
	remark: ''
})
// 字典
const { dicts } = useDicts(['system_global_gender', 'recruit_customer_level', 'recruit_education_background', 'recruit_follow_method'])
// 获取渠道列表
const channelPage = ref<ChannelItem[]>([])
const getChannelPageData = async () => {
	const { code, data } = await getChannelPageApi()
	if (code !== '200') return

	channelPage.value = data.records
}
// 获取科目列表
const subjectPage = ref<SubjectItem[]>([])
const getSubjectPageData = async () => {
	const { code, data } = await getSubjectPageApi()
	if (code !== '200') return

	subjectPage.value = data.records
}
// 获取班级列表
const classPage = ref<ClassItem[]>([])
const getClassPageData = async () => {
	const { code, data } = await getClassPageApi()
	if (code !== '200') return

	classPage.value = data.records
}
// 获取地区信息
const getCity = (val: string[]) => {
	customer.value.province = val[0]
	customer.value.city = val[1]
	customer.value.county = val[2]
}

// 跟进信息
const follow = ref<Follow>({
	followMethod: '',
	followTime: '',
	nextFollowTime: '',
	followContent: ''
})
const fileList = ref<UploadUserFile[]>([])
// 确认日期后计算下次跟进时间
const onTimeChange = (val: string) => {
	const date = new Date(val)
	date.setDate(date.getDate() + 10)
	follow.value.nextFollowTime = val ? tool.dateFormat(date).split(' ')[0] : ''
}
// 上传附件
const followFile = ref<FollowFileItem[]>([])
const upload: UploadRequestHandler = async (options) => {
	const data = await tool.oss.upload(options.file)
	followFile.value.push({ name: data.name, url: data.res.requestUrls[0] })
}

// 经办人
const userStore = useUserStore()
const manager = ref({
	inputTime: tool.dateFormat(new Date()),
	managerTeacher: userStore.userInfo.username
})

// 保存按钮
const route = useRoute()
const router = useRouter()
const tagStore = useTagStore()
const postConsultAddData = async () => {
	const { code } = await postConsultAddApi({ customer: customer.value, follow: follow.value, followFile: followFile.value })
	if (code !== '200') return

	ElMessage.success('新建咨询成功~')
	// 返回上一页并关闭标签（顺带取消了组件的缓存）
	router.go(-1)
	tagStore.rmViewTag(route as any)
}

/* 生命周期 */
onMounted(() => {
	getChannelPageData()
	getSubjectPageData()
	getClassPageData()
})
</script>

<style scoped></style>@renderer/stores/modules/tag@renderer/stores/modules/user